<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/b/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title></title>
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Mobile viewport optimized: j.mp/bplateviewport -->
  <meta name="viewport" content="width=device-width,initial-scale=1">

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->

  <!-- CSS: implied media=all -->
  <!-- CSS concatenated and minified via ant build script-->
  <link rel="stylesheet" href="/css/${theme}.css">
  <!-- end CSS-->

  <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->

  <!-- All JavaScript at the bottom, except for Modernizr / Respond.
       Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
       For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
  <script src="/js/libs/modernizr-2.0.6.min.js"></script>
</head>

<body>

    <div class="container">

    <header class="header clearfix">
      <div class="logo">.Simpliste</div>

      <nav class="menu_main">
        <ul>
          <li class="active"><a href="#">About</a></li>
          <li><a href="#">Skins</a></li>
          <li><a href="#">Samples</a></li>
        </ul>
      </nav>
    </header>


    <div class="info">
      <article class="hero clearfix">
        <div class="col_100">
          <h1>Простое решение простых задач</h1>
          <img src="/img/master.png" alt="" class="img_floatleft">
          <p>You don't always need to make difficult work of running management system with administrative panel to have a web site. âSimplisteâ is a very simple and easy to use HTML template for web projects where you only need to create one or couple of pages with simple layout. If you are working on a lightweight information page with as less efforts for you to code and as less kilobytes  for the user to download as possible, âSimplisteâ is what you need.</p>
          <p>No CMS required and it's free. Clean code will make your task even easier. HTML5 and CSS3 bring all their features for your future site. This template has skins which you can choose from. No images are used for styling.</p>
          <p>Are you worried about convenience of your site users with mobile devices? âSimplisteâ responds to the width of user's device and makes information more accessible.</p>
          <p>Можно попробовать разные темы :
          	<c:forEach items="${themes}" var="t">
          		&nbsp;<a href="?theme=${t}">${t}</a>
          	</c:forEach>
          </p>
        </div>
      </article>


      <article class="article clearfix">
        <div class="col_33">
          <h2>Входные двери</h2>
          <img src="/img/steel_doors.png" alt="" class="img_floatleft">
        </div>

        <div class="col_33">
          <h2>Межкомнатные двери</h2>
          <img src="/img/doors.png" alt="" class="img_floatleft">
        </div>

        <div class="col_33">
          <h2>Easy to use</h2>
          <img src="/img/ico-documentation.png" alt="" class="img_floatleft">
          <p>âSimplisteâ is not a template for a CMS. You can use its code right away after downloading without reading any documentation. Place your content, make customisations and voilÃ  the site is ready to upload to the server.</p>
          <p>All content management can be done by using existing sample blocks and styles. Almost every template style is represented among <a href="#samples">samples</a> on this page. Off course you can create your own styles, which is easy as well.</p>
        </div>

        <div class="clearfix"></div>


        <h1>âSimplisteâ in use</h1>
        
        <div class="col_50">
          <h2>Sample content</h2>
          
          <h3>Principles behind âSimplisteâ</h3>
          <ul>
             <li>Really simple</li>
             <li>Has ready to use set of simple designs</li>
             <li>It's written using HTML5 and CSS3</li>
             <li>It responds to mobile devices</li>
             <li>No CMS</li>
             <li>Free</li>
          </ul>
          
          <h3>How to use?</h3>
          <ol>
             <li>Choose one skin from the list above</li>
             <li>Click download button</li>
             <li>Unpack files</li>
             <li>Make any customisation you need</li>
             <li>Upload your new site to the server</li>
          </ol>
        </div>        

        <div class="col_50">
          <form action="#" method="post" class="form">
            <h2>Sample form</h2>

            <p class="col_50">
              <label for="name">Simple name:</label><br/>
              <input type="text" name="name" id="name" value="" tabindex="1" />
            </p>
            <p class="col_50">
              <label for="name">Simple e-mail:</label><br/>
              <input type="text" name="name" id="name" value="" tabindex="1" />
            </p>
            <div class="clearfix"></div>

            <h3>Your favorite number</h3>
            <p>
              <div class="col_33">
                <label for="radio-choice-1"><input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" /> One</label><br/>
                <label for="radio-choice-2"><input type="radio" name="radio-choice-1" id="radio-choice-2" tabindex="3" value="choice-2" /> Two</label><br/>
                <label for="radio-choice-3"><input type="radio" name="radio-choice-1" id="radio-choice-3" tabindex="4" value="choice-3" /> Three</label>
              </div>

              <div class="col_33">
                <label for="radio-choice-4"><input type="radio" name="radio-choice-1" id="radio-choice-4" tabindex="2" value="choice-1" /> Four</label><br/>
                <label for="radio-choice-5"><input type="radio" name="radio-choice-1" id="radio-choice-5" tabindex="3" value="choice-2" /> Five</label><br/>
                <label for="radio-choice-6"><input type="radio" name="radio-choice-1" id="radio-choice-6" tabindex="4" value="choice-3" /> Six</label>
              </div>

              <div class="col_33">
                <label for="radio-choice-7"><input type="radio" name="radio-choice-1" id="radio-choice-7" tabindex="2" value="choice-1" /> Seven</label><br/>
                <label for="radio-choice-8"><input type="radio" name="radio-choice-1" id="radio-choice-8" tabindex="3" value="choice-2" /> Eight</label><br/>
                <label for="radio-choice-9"><input type="radio" name="radio-choice-1" id="radio-choice-9" tabindex="3" value="choice-2" /> Niine</label>
              </div>

            <div class="clearfix"></div>
            </p>

            <p>
              <label for="select-choice">Simple city:</label>
              <select name="select-choice" id="select-choice">
                <option value="Choice 1">London</option>
                <option value="Choice 2">Paris</option>
                <option value="Choice 3">Rome</option>
              </select>
            </p>

            <p>
              <label for="textarea">Simple testimonial:</label><br/>
              <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
            </p>

            <p>
              <label for="checkbox"><input type="checkbox" name="checkbox" id="checkbox" /> Simple agreement</label><br/>
            </p>

            <div>
                <input type="submit" value="Submit" class="button" />
            </div>
          </form>
        </div>

        <div class="clearfix"></div>


        <div class="col_33">
          <h2>More elements</h2>

          <p>Use <code>strong</code> tag for information with <strong>strong importance</strong>. Use <code>em</code> tag to <em>stress emphasis</em> on a word or phrase.</p>

          <p class="warning">Sample <code>.warning</code></p>
          <p class="success">Sample <code>.success</code></p>
          <p class="message">Sample <code>.message</code></p>
        </div>

        <div class="col_66">
          <h2>CSS classes table</h2>

          <table class="table">
            <tr>
              <th>Class</th>
              <th>Description</th>
            </tr>

            <tr>
              <td><code>.col_33</code></td>
              <td>Column with 33% width</td>
            </tr>
            <tr>
              <td><code>.col_50</code></td>
              <td>Column with 50% width</td>
            </tr>
            <tr>
              <td><code>.col_66</code></td>
              <td>Column with 66% width</td>
            </tr>
            <tr>
              <td><code>.col_100</code></td>
              <td>Full width column with proper margins</td>
            </tr>
            <tr>
              <td><code>.clearfix</code></td>
              <td>Use after or wrap a block of floated columns</td>
            </tr>
            <tr>
              <td><code>.left</code></td>
              <td>Left text alignment</td>
            </tr>
            <tr>
              <td><code>.right</code></td>
              <td>Right text alignment</td>
            </tr>
            <tr>
              <td><code>.center</code></td>
              <td>Centered text alignment</td>
            </tr>
            <tr>
              <td><code>.img_floatleft</code></td>
              <td>Left alignment for images in content</td>
            </tr>
            <tr>
              <td><code>.img_floatright</code></td>
              <td>Right alignment for images in content</td>
            </tr>
            <tr>
              <td><code>.img</code></td>
              <td>Makes image change its width when browser window width is changed</td>
            </tr>
          </table>
        </div>

        <div class="clearfix"></div>

      </article>
    </div>
    
    <footer class="footer clearfix">
      <div class="copyright">Keep it simplest</div>

      <nav class="menu_bottom">
        <ul>
          <li class="active"><a href="#">About</a></li>
          <li><a href="#">Skins</a></li>
          <li><a href="#">Samples</a></li>
        </ul>
      </nav>
    </footer>

  </div> <!--! end of #container -->


  <!-- JavaScript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="/js/libs/jquery-1.6.2.min.js"><\/script>')</script>


  <!-- scripts concatenated and minified via ant build script-->
  <script defer src="/js/plugins.js"></script>
  <script defer src="/js/script.js"></script>
  <!-- end scripts-->

	
  <!-- Change UA-XXXXX-X to be your site's ID -->
  <script>
    window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
    Modernizr.load({
      load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
    });
  </script>


  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
       chromium.org/developers/how-tos/chrome-frame-getting-started -->
  <!--[if lt IE 7 ]>
    <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
    <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
  <![endif]-->
  
</body>
</html>